<template>
<div class="container">
    <main>
        <!-- <Header @update:wordValue='handleChange'/> -->
        <!-- 
            另一种语法糖就是直接v-model
            1.v-model
         -->
         <Header v-model="searchWord"/>
        <definition :searchWord='searchWord' />
    </main>
</div>
</template>

<script setup>
import Header from "./components/Header.vue"
import Definition from "./components/Definition.vue"

// function handleChange(value){
//     console.log(value)
// }

//2.导入子组件里响应的变量  wacth监听
import {ref,watch} from "vue";
const searchWord =ref();

watch(searchWord,(newValue) => {
    console.log(newValue);
});
</script>

<style lang="scss" scoped>
div.container{
    height: 100vh;
    overflow: hidden;
    background: black;
    main{
        max-width: 1000px;
        margin:0 auto;
        display: flex;
        flex-direction: column;
        color:white;
        padding: 1rem;
    }
}
</style>
